<template>
	<div class="kabao">
		<p>
			<img src="../assets/img/7519.png" alt="" @click="$router.go(-1)" />
			<span>卡包信息</span>
			<router-link to="/xinzhen" class="xz">新增</router-link>
		</p>
		
		<router-link to="/password" class="mm">
			<span>提现密码</span>
			<img src="../assets/img/6326.png" alt="" />
		</router-link>
		
		<!-- 银行卡 -->
		<div v-for="(index, item) in this.list" :key="item" class="yhk">
			<input type="radio" name="danxuan" v-model="tx" :value="item" class="yh-input" @click="inputt" />
			<div>
				<p class="yhk-p">
					{{ index.BankName }}
					<img src="../assets/img/lj.png" alt="" class="yhk-img" @click="ljt(item)" />
				</p>
				<p>{{ index.BankCardNumber.replace(/(\d{4})(?=\d)/g, "$1 ") }}</p>
			</div>
		</div>
		<p class="panduan" v-if="panduan">您还未添加银行卡，请点击新增，添加银行卡</p>
	</div>
</template>

<script>
	import axios from "axios";
	import Qs from "qs";
	import {getUser} from "@/api/index.js";
	import {BindBankCardInfo,DeleteBankCardInfo} from "@/api/all.js";

	export default {
		data() {
			return {
				tx: "",
				list: [],
				panduan:false
			};
		},
		created() {},
		mounted() {
			this.message();
		},
		methods: {
			message() {
				getUser().then(res =>{
					let Data = res.Data;
					if (Data.BankCardInfo == "" || Data.BankCardInfo == "[]") {
							//这里原先为==
							for (let i = 0; i < document.querySelectorAll(".yhk").length; i++) {
								document.querySelectorAll(".yhk")[i].style = "display:none";
							}
							this.panduan = true;
						} else if (Data.BankCardInfo != "") {
							//这里原先为!=,
							for (let i = 0; i < document.querySelectorAll(".yhk").length; i++) {
								document.querySelectorAll(".yhk")[i].style = "display:block";
							}
							this.panduan = false;
							let arr = JSON.parse(Data.BankCardInfo)
							this.list = arr;
							console.log(this.list,'11111111');
						}
						
						for (let j = 0; j < Data.BankCardInfo; j++) {
							let aa = JSON.parse(Data.BankCardInfo)[0].IsDefault
							if ( aa == true) {
								// console.log(44);
								this.tx = 0;
							} else if (JSON.parse(Data.BankCardInfo)[1].IsDefault == true) {
								this.tx = 1;
							}
						} 
				})
			},
			inputt(event) {
				//获取点击对象
				var el = event.currentTarget;
				let dx = el.value;
				let data = {
					BankCardNumber: this.list[el.value].BankCardNumber,
					BankName: this.list[el.value].BankName,
					BankAddress: this.list[el.value].BankAddress,
					IsDefault: true
				};
				BindBankCardInfo(data).then(res =>{
					console.log(res,'22222222');

				})
			
			},
			// 删除银行卡接口 
			ljt(item) {
				console.log(item);
				getUser().then(res =>{
					if(res.Code == 200){						
						let datas = JSON.parse(res.Data.BankCardInfo);
						// console.log(datas,'qqqqqq');
						let data = datas[item];
						// console.log(data,'qqqqqq');
						DeleteBankCardInfo(data).then(res =>{
							console.log(res,'1211111111111');
							location.reload();
						})
					}
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	.yhk-p {
		display: flex;
		align-items: center;
	}

	.yhk-img {
		width: 1rem;
	}

	.panduan {
		color: #333;
		font-size: 0.9rem;
		margin-top: 4%;
		// display: none;
	}

	.yhk>div>p:first-child {
		font-size: 0.9rem;
		font-weight: 400;
		color: #ffffff;
	}

	.yhk>div>p:nth-child(2) {
		font-size: 1.1rem;
		font-weight: 400;
		color: #ffffff;
	}

	.yhk>div {
		width: 100%;
		height: 77%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 3%;
		box-sizing: border-box;
	}

	.yh-input {
		float: right;
	}

	.yhk>input {
		width: 6%;
		height: 17%;
	}

	.kabao>div:nth-child(2n) {
		background: #537fe9;
	}

	.kabao>div:nth-child(2n + 1) {
		background: #29ae66;
	}

	.yhk {
		width: 95%;
		height: 7.5rem;
		margin-top: 1.3125rem;
		box-shadow: 0rem 0.25rem 0.625rem rgba(83, 127, 233, 0.43);
		border-radius: 0.375rem;
		box-sizing: border-box;
		padding: 0.75rem;
	}

	.mm {
		width: 95%;
		height: 3.125rem;
		border-bottom: 1px solid #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		font-size: 0.9rem;
		font-weight: 500;
		color: #374ef2;
	}

	.mm>img {
		width: 0.5rem;
		height: 0.7rem;
	}

	.xz {
		font-size: 0.9rem;
		font-weight: 400;
		color: #374ef2;
	}

	.kabao {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
	}

	.kabao>p:first-child>img {
		width: 0.9375rem;
		height: 0.9375rem;
	}

	.kabao>p:first-child {
		width: 100%;
		height: 7%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 3%;
		padding-right: 4%;
		box-sizing: border-box;
		font-size: 1, 1rem;
		font-weight: 500;
		color: #3a3a3a;
		border-bottom: 1px solid #e6e6e6;
	}

	a {
		text-decoration: none;
	}
</style>
